<template>
  <div class="statement">
    <div class="statement-header">
      <div class="header-left">
        <div class="left-title">Account Statement</div>
        <div class="left-text">ANBIO BIOTECHNOLOGY</div>
      </div>
<!--      <div class="header-right">
        <img src="" alt="" />
      </div>-->
    </div>

    <div class="statement-block">
      <div style="text-align: end"><el-button type="primary" @click="downloadPDF">Download PDF</el-button></div>
      <div class="block-header">
        <div
          class="list"
          v-for="(item, index) in 4"
          :key="index"
          :class="{
            list0: index == 0,
            list1: index == 1,
            list2: index == 2,
            list3: index == 3,
          }"
        >
          {{
            index == 0
              ? "Date"
              : index == 1
              ? "Details"
              : index == 2
              ? "Currency"
              : index == 3
              ? "Amount"
              : ""
          }}
        </div>
      </div>

      <div class="block-table">
        <div class="table" v-for="(item, index) in tableData" :key="index">
          <div
            class="table-list"
            v-for="(k, n) in 4"
            :key="n"
            :class="{
              list0: n == 0,
              list1: n == 1,
              list2: n == 2,
              list3: n == 3,
            }"
          >
            <div >
              {{
                n == 0
                  ? item.sdate
                  : n == 1
                  ? item.details
                  : n == 2
                  ? item.currency
                  : n == 3
                  ? item.amount
                  : ""
              }}
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {emailVerification} from "@/utils/verify";
import {md5} from "@/utils/md5";
import {cashReportList} from "@/api";

export default {
  data() {
    return {
      page: 1,
      limit: 1,
      tableData: [

      ],
    };
  },
  mounted() {
    let param={}

    this.CashReportList(param);
  },
  methods: {
    CashReportList(param) {
      param.column = "sdate";
      param.order = "desc";
      cashReportList(param).then((res) => {
            if (res.success == true) {
              for (let i=0;i<res.result.length;i++)
              {
                res.result[i].sdate=this.formatDate(res.result[i].sdate);
              }
              this.tableData=res.result
              let  a=1;


            }
          });
    },
    downloadPDF()
    {
      window.open('https://anbio-plug.xmw1688.com/common/test', '_blank', '');
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      const month = date.getMonth() + 1; // 月份是从0开始的，所以需要+1
      const day = date.getDate();
      const year = date.getFullYear();
      // 使用两位数字表示月份和日期
      return (`${month.toString().padStart(2, '0')}/${day.toString().padStart(2, '0')}/${year}`);
    }

  },
};
</script>

<style lang="less" scoped>
.statement {
  padding: 0 200px;
  padding-top: 50px;
  box-sizing: border-box;
  .statement-header {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header-left {
      text-align: left;

      .left-title {
        font-size: 24px;
        font-weight: 500;
        color: #000;
        margin-bottom: 30px;
        margin-left: 0px;
      }

      .left-text {
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.4);
      }
    }

    .header-right {
      width: 200px;
      height: 100%;
      border: 1px solid;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .statement-block {
    margin-top: 100px;
    .block-header {
      display: flex;
      align-items: center;
      border-bottom: 1px solid;

      .list {
        text-align: left;
        font-size: 14px;
        color: #000;
        font-weight: 500;
      }

      .list0 {
        width: 20%;
        margin-left: 20px;
      }

      .list1 {
        width: 40%;
        margin-left: 32px;
      }

      .list2 {
        width: 20%;
        margin-left: -20px;
      }

      .list3 {
        width: 20%;
        margin-left: 20px;
      }
    }

    .block-table {
        padding-bottom: 50px;
        box-sizing: border-box;
      .table {
        height: 50px;
        width: 100%;
        border-bottom: 1px dashed;
        display: flex;
        align-items: center;

        .table-list {
          text-align: left;
          font-size: 14px;
          color: #505050;
          font-weight: 500;
        }

        .list0 {
          width: 20%;
        }

        .list1 {
          width: 40%;
        }

        .list2 {
          width: 20%;
          padding-left: 10px;
          box-sizing: border-box;
        }

        .list3 {
          width: 20%;
          padding-left: 10px;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
